<template>
	<view  class="page">
		<custom-navigation title="查询" >
		</custom-navigation>
		
		
		<view class="text-box flex-column-center"   @click="showPicker=true">
				日期{{start_time}}至{{end_time}}
		</view>
		<view class="btn" @click="confirm">查询</view>
		<mx-date-picker :show="showPicker" type="range" :value="value" :show-tips="true" :begin-text="'开始'"
			:end-text="'结束'" :show-seconds="true" @confirm="onSelected" @cancel="onSelected" />
	</view>
</template>

<script>
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	export default {
		components: {
			MxDatePicker
		},
		data() {
			return {
				start_time: new Date().toISOString().slice(0, 10),
					end_time:new Date().toISOString().slice(0, 10),
					showPicker:false,
					value: '',
					e:null
			}
		},
		onShow() {
		this.e={value:[this.start_time,this.end_time],date:''}
		},
		methods: {
			
			onSelected(e) { //选择
				this.showPicker = false;
			this.start_time = e.value[0].replaceAll("/", "-")
			this.end_time = e.value[1].replaceAll("/", "-")
				this.e={value:e.value,date:e.date} 
			},
			confirm(){
				uni.setStorageSync("query-date",{value:this.e.value,date:this.e.date})
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.text-box{
		width: 100%;
		height: 100rpx;
		opacity: 1;
		background: rgba(255, 255, 255, 1);
		justify-content: center;
		font-size: 30rpx;
		font-weight: 500;
		color: rgba(0, 0, 0, 1);
	}
	.btn{
		margin-left: 48rpx;
		margin-top: 140rpx;
		width: 656rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		border-radius: 100rpx;
		background: rgba(56, 192, 158, 1);
		font-size: 32rpx;
		font-weight: 700;
		color: rgba(255, 255, 255, 1);
	}
</style>
